<template>
	<div class="resident-archive-page">
		<div class="page-header">
			<span class="header-line"></span>
			<h3>完善档案信息</h3>
		</div>
		<div class="divider"></div>

		<div class="form-container">
			<!-- 居民基本信息部分 -->
			<h4>居民信息</h4>
			<el-form :model="form" label-width="80px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="居民编号">
							<el-input v-model="form.residentNo" placeholder="系统自动生成" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="姓名">
							<el-input v-model="form.name" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="居民头像">
							<el-upload action="#" :show-file-list="false" :on-success="handleAvatarSuccess">
								<el-button size="small" type="primary">点击上传</el-button>
								<div class="avatar-preview" v-if="form.avatarUrl">
									<img :src="form.avatarUrl" alt="居民头像" class="avatar-img">
								</div>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8">
						<el-form-item label="身份证号">
							<el-input v-model="form.idCard" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="手机号码">
							<el-input v-model="form.phone" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="居民标签">
							<el-select v-model="form.residentTag" placeholder="请选择" multiple>
								<el-option label="老年人" value="elderly"></el-option>
								<el-option label="儿童" value="child"></el-option>
								<el-option label="孕产妇" value="maternal"></el-option>
								<el-option label="慢性病患者" value="chronic"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8">
						<el-form-item label="现居地">
							<el-input v-model="form.currentAddress" placeholder="请输入详细地址"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="行政区划">
							<el-input></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8">
						<el-form-item label="户籍地址">
							<el-input v-model="form.householdAddress" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="家庭成员">
							<el-button type="text" @click="associateFamilyMember">+关联家庭成员</el-button>
							<div class="family-members" v-if="form.familyMembers.length">
								<el-tag v-for="(member, index) in form.familyMembers" :key="index" closable
									@close="removeFamilyMember(index)">
									{{ member.name }}({{ member.relation }})
								</el-tag>
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8">
						<el-form-item label="性别">
							<el-select v-model="form.gender" placeholder="请选择">
								<el-option label="男" value="male"></el-option>
								<el-option label="女" value="female"></el-option>
								<el-option label="其他" value="other"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="出生年月">
							<el-date-picker v-model="form.birthDate" type="date" placeholder="请选择日期" format="yyyy-MM-dd"
								value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="籍贯">
							<el-input v-model="form.nativePlace" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8">
						<el-form-item label="民族">
							<el-select v-model="form.nation" placeholder="请选择">
								<el-option label="汉族" value="han"></el-option>
								<el-option label="蒙古族" value="mongolian"></el-option>
								<el-option label="回族" value="hui"></el-option>
								<el-option label="藏族" value="tibetan"></el-option>
								<el-option label="维吾尔族" value="uyghur"></el-option>
								<el-option label="其他" value="other"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="文化程度">
							<el-select v-model="form.education" placeholder="请选择">
								<el-option label="小学" value="primary"></el-option>
								<el-option label="初中" value="junior"></el-option>
								<el-option label="高中" value="senior"></el-option>
								<el-option label="大专" value="college"></el-option>
								<el-option label="本科" value="bachelor"></el-option>
								<el-option label="研究生及以上" value="graduate"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="婚姻状况">
							<el-select v-model="form.maritalStatus" placeholder="请选择">
								<el-option label="未婚" value="unmarried"></el-option>
								<el-option label="已婚" value="married"></el-option>
								<el-option label="离异" value="divorced"></el-option>
								<el-option label="丧偶" value="widowed"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8">
						<el-form-item label="职业">
							<el-input v-model="form.occupation" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="工作单位">
							<el-input v-model="form.workUnit" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8">
						<el-form-item label="紧急联系人" label-width="100px">
							<el-input v-model="form.emergencyContact" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="联系电话">
							<el-input v-model="form.emergencyPhone" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="登录密码">
							<el-input v-model="form.loginPassword" type="password"
								placeholder="8位以上的数字和字母组合"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8">
						<el-form-item label="户籍类型">
							<el-select v-model="form.householdType" placeholder="请选择">
								<el-option label="农业" value="agricultural"></el-option>
								<el-option label="非农业" value="nonAgricultural"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="14">
						<el-form-item label="定点医疗单位" label-width="100px">
							<el-input v-model="form.designatedMedicalUnit" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="24">
						<el-form-item label="费用类型">
							<el-checkbox-group v-model="form.feeType">
								<el-checkbox label="self" border>自费</el-checkbox>
								<el-checkbox label="social" border>社会医疗保险</el-checkbox>
								<el-checkbox label="commercial" border>商业保险</el-checkbox>
								<el-checkbox label="rural" border>新农合</el-checkbox>
								<el-checkbox label="other" border>其他</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div class="divider"></div>

			<!-- 健康信息部分 -->
			<h4>健康信息</h4>
			<el-form :model="form" label-width="80px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="身高">
							<el-input v-model="form.height" placeholder="请输入" suffix-icon="el-icon-ruler"></el-input>
							<span class="unit">cm</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="体重">
							<el-input v-model="form.weight" placeholder="请输入" suffix-icon="el-icon-scale"></el-input>
							<span class="unit">kg</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="血型">
							<el-select v-model="form.bloodType" placeholder="请选择">
								<el-option label="A型" value="A"></el-option>
								<el-option label="B型" value="B"></el-option>
								<el-option label="AB型" value="AB"></el-option>
								<el-option label="O型" value="O"></el-option>
								<el-option label="未知" value="unknown"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>


				<!-- 过敏史 -->
				<el-row class="inline-input-row">
					<el-col :span="24">
						<el-form-item label="过敏史">
							<div class="inline-content">
								<el-radio-group v-model="form.allergyHistory" class="inline-radio">
									<el-radio :label="false">无</el-radio>
									<el-radio :label="true">有</el-radio>
								</el-radio-group>

								<el-input v-if="form.allergyHistory" v-model="form.allergyDetails"
									placeholder="请输入具体过敏史" class="inline-input">
								</el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 既往史 -->
				<el-row class="inline-input-row">
					<el-col :span="24">
						<el-form-item label="既往史">
							<div class="inline-content">
								<el-radio-group v-model="form.pastHistory" class="inline-radio">
									<el-radio :label="false">无</el-radio>
									<el-radio :label="true">有</el-radio>
								</el-radio-group>

								<el-input v-if="form.pastHistory" v-model="form.pastHistoryDetails"
									placeholder="请输入具体既往史" class="inline-input">
								</el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 家族病史 -->
				<el-row class="inline-input-row">
					<el-col :span="24">
						<el-form-item label="家族病史">
							<div class="inline-content">
								<el-radio-group v-model="form.familyHistory" class="inline-radio">
									<el-radio :label="false">无</el-radio>
									<el-radio :label="true">有</el-radio>
								</el-radio-group>

								<el-input v-if="form.familyHistory" v-model="form.familyHistoryDetails"
									placeholder="请输入具体家族病史" class="inline-input">
								</el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 就诊史 -->
				<el-row class="inline-input-row">
					<el-col :span="24">
						<el-form-item label="就诊史">
							<div class="inline-content">
								<el-radio-group v-model="form.medicalHistory" class="inline-radio">
									<el-radio :label="false">无</el-radio>
									<el-radio :label="true">有</el-radio>
								</el-radio-group>

								<el-input v-if="form.medicalHistory" v-model="form.medicalHistoryDetails"
									placeholder="请输入具体就诊史" class="inline-input">
								</el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="24">
						<el-form-item label="健康备注">
							<el-input v-model="form.healthRemarks" type="textarea" rows="4"
								placeholder="请输入其他健康相关信息"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<div class="divider"></div>

				<!-- 操作按钮 -->
				<el-form-item>
					<el-button type="primary" @click="save">保存</el-button>
					<!-- <el-button type="success" @click="signImmediately">立即签约</el-button> -->
					<el-button @click="goBack">返回</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 关联家庭成员弹窗 -->
		<el-dialog title="关联家庭成员" :visible.sync="familyMemberDialogVisible" width="500px">
			<el-form :model="familyMemberForm" :rules="familyMemberRules" ref="familyMemberForm" label-width="100px">
				<el-form-item label="成员姓名" prop="name">
					<el-input v-model="familyMemberForm.name" placeholder="请输入家庭成员姓名"></el-input>
				</el-form-item>
				<el-form-item label="与本人关系" prop="relation">
					<el-select v-model="familyMemberForm.relation" placeholder="请选择关系">
						<el-option label="配偶" value="spouse"></el-option>
						<el-option label="父亲" value="father"></el-option>
						<el-option label="母亲" value="mother"></el-option>
						<el-option label="儿子" value="son"></el-option>
						<el-option label="女儿" value="daughter"></el-option>
						<el-option label="兄弟" value="brother"></el-option>
						<el-option label="姐妹" value="sister"></el-option>
						<el-option label="祖父" value="grandfather"></el-option>
						<el-option label="祖母" value="grandmother"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="familyMemberDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="confirmAddFamilyMember">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				form: {
					// 基本信息
					residentNo: '',
					name: '',
					avatarUrl: '',
					idCard: '',
					phone: '',
					residentTag: [],
					currentAddress: '',
					administrativeRegion: [],
					householdAddress: '',
					familyMembers: [], // 存储家庭成员列表
					gender: '',
					birthDate: '',
					nativePlace: '',
					nation: '',
					education: '',
					maritalStatus: '',
					occupation: '',
					workUnit: '',
					emergencyContact: '',
					emergencyPhone: '',
					loginPassword: '',
					householdType: '',
					designatedMedicalUnit: '',
					feeType: [],

					// 健康信息
					height: '',
					weight: '',
					bloodType: '',
					rhNegative: '',
					allergyHistory: false,
					allergyDetails: '',
					pastHistory: false,
					pastHistoryDetails: '',
					medicalHistory: false,
					medicalHistoryDetails: '',
					familyHistory: false,
					familyHistoryDetails: '',
					healthRemarks: ''
				},

				// 家庭成员弹窗相关
				familyMemberDialogVisible: false,
				familyMemberForm: {
					name: '',
					relation: '',
					phone: '',
					idCard: ''
				},
				familyMemberRules: {
					name: [{
						required: true,
						message: '请输入成员姓名',
						trigger: 'blur'
					}],
					relation: [{
						required: true,
						message: '请选择与本人关系',
						trigger: 'change'
					}]
				},

				// 日期选择器配置
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
				},

				// 行政区划数据
				regionOptions: [{
					value: 'beijing',
					label: '北京市',
					children: [{
							value: 'haidian',
							label: '海淀区',
							children: [{
									value: 'zhongguancun',
									label: '中关村'
								},
								{
									value: 'wudaokou',
									label: '五道口'
								}
							]
						},
						{
							value: 'chaoyang',
							label: '朝阳区'
						}
					]
				}]
			};
		},
		created() {
			// 可以在这里获取已有的居民信息进行回显
		},
		methods: {
			// 处理头像上传成功
			handleAvatarSuccess(response, file) {
				
			},

			// 打开关联家庭成员弹窗
			associateFamilyMember() {
				// 重置表单
				
				// 显示弹窗
				this.familyMemberDialogVisible = true;
			},

			// 确认添加家庭成员
			confirmAddFamilyMember() {
				
			},

			// 根据关系值获取显示标签
			getRelationLabel(value) {
				const relationMap = {
					'spouse': '配偶',
					'father': '父亲',
					'mother': '母亲',
					'son': '儿子',
					'daughter': '女儿',
					'brother': '兄弟',
					'sister': '姐妹',
					'grandfather': '祖父',
					'grandmother': '祖母',
					'other': '其他'
				};
				return relationMap[value] || value;
			},

			// 移除家庭成员
			removeFamilyMember(index) {
				this.form.familyMembers.splice(index, 1);
				this.$message.info('已移除家庭成员');
			},

			// 保存表单
			save() {
				// 表单验证和提交逻辑
				this.$message.success('档案信息保存成功');
			},

			/* // 立即签约
			signImmediately() {
				// 跳转到签约页面的逻辑
				this.$router.push('/sign-contract');
			}, */

			// 返回上一页
			goBack() {
				this.$router.back();
			}
		}
	};
</script>

<style scoped>
	.resident-archive-page {
		width: 1150px;
		margin: 20px auto;
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 4px;
	}

	.page-header {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.header-line {
		display: inline-block;
		width: 6px;
		height: 24px;
		background-color: #20a0ff;
		margin-right: 8px;
	}

	.divider {
		height: 1px;
		background-color: #e4e7ed;
		margin: 20px 0;
	}

	.form-container h4 {
		margin-bottom: 20px;
		font-weight: 600;
		color: #1f2d3d;
	}

	.el-form-item {
		margin-bottom: 15px;
	}

	.el-input,
	.el-select,
	.el-cascader {
		width: 200px;
		height: 40px;
	}

	/* 头像预览样式 */
	.avatar-preview {
		display: inline-block;
		margin-left: 10px;
		vertical-align: middle;
	}

	.avatar-img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		object-fit: cover;
	}

	/* 家庭成员标签样式 */
	.family-members {
		display: inline-block;
		margin-left: 10px;
	}

	.family-members .el-tag {
		margin-right: 5px;
		margin-top: 5px;
	}

	/* 单位文本样式 */
	.unit {
		margin-left: 5px;
		color: #888;
	}

	/* 按钮样式调整 */
	.el-form-item:last-of-type {
		margin-top: 20px;
	}

	.el-button+.el-button {
		margin-left: 10px;
	}

	/* 单选框与输入框在同一行显示的样式 */
	.inline-input-row .el-form-item {
		display: flex;
		align-items: center;
	}

	.inline-content {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.inline-radio {
		display: flex;
		align-items: left;
		margin-right: 15px;
	}

	.inline-radio .el-radio {
		margin-right: 15px;
	}

	.inline-input {
		flex: 1;
		width: 850px;
	}
	::v-deep .el-form-item__content {
	  margin-left: 10px !important; /* 替换为你需要的值 */
	}
</style>